﻿@inject ExampleService ExampleService
@inject NavigationManager NavigationManager

<PageTitle>@ExampleService.TitleFor(example)</PageTitle>
<HeadContent>
    <meta name="description" content="@ExampleService.DescriptionFor(example)">
    <meta name="author" content="Radzen">
    <meta property="og:title" content="@ExampleService.TitleFor(example)" />
    <meta property="og:description" content="@ExampleService.DescriptionFor(example)" />
    <meta property="og:site_name" content="Radzen Blazor Components">
    <meta property="og:image" content="https://blazor.radzen.com/images/radzen-og.png" />
    <meta property="twitter:card" content="summary_large_image" />
</HeadContent>

<RadzenTabsItem Text="How to use" Icon="@("\ue663")" Title="See how to use UI Blocks" Style="--rz-tabs-icon-font-size: 1rem;">
    <RadzenRow style="max-width: 600px;" class="rz-my-12 rz-mx-auto">
        <RadzenColumn Size="12">
            <RadzenText TextStyle="TextStyle.H4" TagName="TagName.H2" TextAlign="TextAlign.Center" class="rz-pt-8">
                UI Blocks <RadzenBadge title="To use it in your application you need an active Radzen Blazor subscription." BadgeStyle="BadgeStyle.Danger" Style="vertical-align: top;">PRO</RadzenBadge>
            </RadzenText>
            <RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" TextAlign="TextAlign.Center" class="rz-mb-6" Style="line-height: 1.5">
                UI Blocks are a premium feature and can be used with an active <RadzenLink Text="Radzen Blazor subscription" Path="https://www.radzen.com/pricing" title="See Radzen Pricing" target="_blank" />.
            </RadzenText>
            <RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" TextAlign="TextAlign.Center" class="rz-mb-6" Style="line-height: 1.5">
                To add and set up a UI block, drag it from the Toolbox and drop it onto the Design Canvas as shown in the video below. You can do this in Radzen Blazor Studio or in Radzen Blazor for Visual Studio.
            </RadzenText>
            <div class="embed-container">
                <iframe src="https://www.youtube.com/embed/ZM3XGYdpUcA" frameborder="0" allowfullscreen=""></iframe>
            </div>
            <RadzenText TextAlign="TextAlign.Center">
                <a class="rz-button rz-button-lg rz-primary rz-variant-flat rz-m-4 rz-mt-8" href="https://www.radzen.com/pricing">See Pricing</a>
            </RadzenText>
        </RadzenColumn>
    </RadzenRow>
</RadzenTabsItem>

@code {
    [Parameter]
    public string Example { get; set; }

    DateTime start;

    Example example;

    protected override void OnInitialized()
    {
        start = DateTime.Now;

        example = ExampleService.FindCurrent(NavigationManager.ToAbsoluteUri(NavigationManager.Uri));
    }
}